<template>
	<!--购买列表 轮播图-->
	<view v-if="showingList">
		<uni-card style="margin: 0;background-image: linear-gradient(to top, #00aaff 0%, #00007f 100%);">
			<uni-swiper-dot :info="showingList" :current="current" :mode="mode" :dots-styles="dotStyle" field="content">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item, index) in showingList" :key="index">
						<view class="swiper-item">
							<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="scaleToFill"
								:src="item.movieImage"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</uni-card>
		<uni-card style="margin: 0;border-radius: 30px 30px 0 0;padding: 0">
			<uni-segmented-control :current="currentControl" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#4cd964"></uni-segmented-control>
			<uni-card v-for="(item,index) in sessionList">
				<uni-row>
					<uni-col :span="6">
						<uni-row>
							<p style="font-size: 20px;font-weight: 7	00;">
								{{utils.moment(item.movieSession.startTime).format('HH:mm')}}
							</p>
							<p>{{utils.moment(item.movieSession.endTime).format('HH:mm')}}散场</p>
						</uni-row>
					</uni-col>
					<uni-col :span="4">
						<uni-row>
							<p>影厅</p>
							<p style="font-size: 20px;">{{item.movieHall.hallName}}</p>
						</uni-row>
					</uni-col>
					<uni-col :span="9" style="text-align: right;">
						<p style="font-size: 25px; padding: 7px;color: coral;">￥{{item.movieSession.sessionPrice}}</p>
					</uni-col>
					<uni-col :span="5" style="text-align: right;">
						<button class="button-round" size="mini"
							@click="toMovieTableChoose(item.movieSession.sessionId)">购票</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</uni-card>
	</view>
</template>

<script lang="ts" setup>
	import api from '../api/api'
	import utils from '../utils'
	import {
		onMounted,
		ref
	} from 'vue'
	const showingList = ref()
	const curMovie = ref()
	const sessionList = ref()
	const dotStyle = ref({
		backgroundColor: 'rgba(83, 200, 249,0.3)',
		border: '1px rgba(83, 200, 249,0.3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
		selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
	})
	const mode = ref('round')
	const current = ref(0)
	const currentControl = ref(0)
	const startTime = ref(utils.moment().format("YYYY-MM-DD HH:mm:ss"))
	const endTime = ref(utils.moment(utils.moment().add(1, 'days').format("YYYY-MM-DD")).subtract(1, 'seconds').format(
		"YYYY-MM-DD HH:mm:ss"))
	const items = ref(['今天', '明天'])
	const change = (e) => {
		current.value = e.detail.current;
		curMovie.value = showingList.value[current.value]
		getSessionList()
	}
	onMounted(() => {
		getShowingMovieList()

	})
	const getShowingMovieList = () => {
		api.movie.getShowingMovieList().then(res => {
			if (res.data.code == 0) {
				showingList.value = res.data.data.list
				curMovie.value = showingList.value[0]
				getSessionList()
			}
		})
	}
	const getSessionList = () => {
		api.session.getSessionListByMovieTime({
			startTime: startTime.value,
			endTime: endTime.value,
			movieId: curMovie.value.movieId
		}).then(res => {
			if (res.data.code == 0) {
				sessionList.value = res.data.data.list
			}
		})
	}
	const onClickItem = (e) => {
		currentControl.value = e.currentIndex
		if (currentControl.value == 0) {
			startTime.value = utils.moment().format("YYYY-MM-DD HH:mm:ss")
			let tmp = utils.moment().add(1, 'days').format("YYYY-MM-DD")
			endTime.value = utils.moment(tmp).subtract(1, 'seconds').format("YYYY-MM-DD HH:mm:ss")
		} else if (currentControl.value = 1) {
			startTime.value = utils.moment().add(1, 'days').format("YYYY-MM-DD")
			let tmp = utils.moment().add(2, 'days').format("YYYY-MM-DD")
			endTime.value = utils.moment(tmp).subtract(1, 'seconds').format("YYYY-MM-DD HH:mm:ss")
		}
		getSessionList()
	}
	const toMovieTableChoose = (id: any) => {
		uni.navigateTo({
			url: '/pages/film/films/filmTable?sessionId=' + id
		})
	}
</script>

<style>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.image {
		width: 200px;
	}

	.button-round {
		border-radius: 20px;
		color: aliceblue;
		font-size: 15px;
		background-color: #ff557f;
	}
</style>
